<html>
<head>
	<title>Telerik Extensions for ASP.NET MVC : Extended Client API Documentation</title>
    <link href="styles/kendo.common.min.css" rel="stylesheet" />
    <link href="styles/kendo.silver.min.css" rel="stylesheet" />
	
	<style tyle="text/css">
		.helpdoc-contents {
			position: absolute;
			padding: 5px 5px 5px 5px;
		}
		
		.helpdoc-hidden {
			visibility: hidden;
		}
		
		.helpdoc-section {
			margin-left: 15px;
		}
		
		.helpdoc-code {
			margin-left: 15px;
			margin-right: 15px;
			border: 1px solid Grey;
			background-color: White;
			padding: 10px 10px 10px 10px;
			width: 100%;
		}
	</style>
</head>
<body>
	<div id="mainSplitter">
		<div id="titlePane">
			<h1>Telerik Extensions for ASP.NET MVC : Extended Client API Documentation</h1>
		</div>
		<div id="mainPane">
            <div id="contentSplitter">
				<!--
				  -- NAVIGATION
				  -->
                <div id="navigationPane">
					<ul id="navPanelBar">
						<li id="navHome">
							Home
							<ul>
								<li id="navHome-gettingStarted" data-contents="navHome-gettingStarted-contents">Getting Started</li>
							</ul>
						</li>
						
						<li id="navComboBox">
							ComboBox
							<ul>
								<li id="navComboBox-dataBindAsTable" data-contents="navComboBox-dataBindAsTable-contents">dataBindAsTable</li>
								<li id="navComboBox-disableListItems" data-contents="navComboBox-disableListItems-contents">disableListItems</li>
								<li id="navComboBox-selectByText" data-contents="navComboBox-selectByText-contents">selectByText</li>
								<li id="navComboBox-selectByValue" data-contents="navComboBox-selectByValue-contents">selectByValue</li>
							</ul>
						</li>

						<li id="navDropDownList">
							DropDownList
							<ul>
								<li id="navDropDownList-dataBindAsTable" data-contents="navDropDownList-dataBindAsTable-contents">dataBindAsTable</li>
								<li id="navDropDownList-disableListItems" data-contents="navDropDownList-disableListItems-contents">disableListItems</li>
								<li id="navDropDownList-selectByText" data-contents="navDropDownList-selectByText-contents">selectByText</li>
								<li id="navDropDownList-selectByValue" data-contents="navDropDownList-selectByValue-contents">selectByValue</li>
							</ul>
						</li>

						<li id="navGrid">
							Grid
							<ul>
								<li id="navGrid-hideColumn" data-contents="navGrid-hideColumn-contents">hideColumn</li>
								<li id="navGrid-showColumn" data-contents="navGrid-showColumn-contents">showColumn</li>
								<li id="navGrid-toggleColumnVisibility" data-contents="navGrid-toggleColumnVisibility-contents">toggleColumnVisibility</li>
								<li id="navGrid-enableClientSort" data-contents="navGrid-enableClientSort-contents">enableClientSort</li>
								<li id="navGrid-hideGroupColumns" data-contents="navGrid-hideGroupColumns-contents">hideGroupColumns</li>
								<li id="navGrid-enableRowDblClick" data-contents="navGrid-enableRowDblClick-contents">enableRowDblClick</li>
							</ul>
						</li>

						<li id="navTabStrip">
							TabStrip
							<ul>
								<li id="navTabStrip-getTab" data-contents="navTabStrip-getTab-contents">getTab</li>
								<li id="navTabStrip-getTabIndex" data-contents="navTabStrip-getTabIndex-contents">getTabIndex</li>
								<li id="navTabStrip-getTabCount" data-contents="navTabStrip-getTabCount-contents">getTabCount</li>
								<li id="navTabStrip-hideTab" data-contents="navTabStrip-hideTab-contents">hideTab</li>
								<li id="navTabStrip-showTab" data-contents="navTabStrip-showTab-contents">showTab</li>
								<li id="navTabStrip-selectTab" data-contents="navTabStrip-selectTab-contents">selectTab</li>
								<li id="navTabStrip-setTabText" data-contents="navTabStrip-setTabText-contents">setTabText</li>
								<li id="navTabStrip-addTab" data-contents="navTabStrip-addTab-contents">addTab</li>
								<li id="navTabStrip-loadTab" data-contents="navTabStrip-loadTab-contents">loadTab</li>
								<li id="navTabStrip-removeTab" data-contents="navTabStrip-removeTab-contents">removeTab</li>
								<li id="navTabStrip-hideContent" data-contents="navTabStrip-hideContent-contents">hideContent</li>
								<li id="navTabStrip-showContent" data-contents="navTabStrip-showContent-contents">showContent</li>
								<li id="navTabStrip-removeContent" data-contents="navTabStrip-removeContent-contents">removeContent</li>
							</ul>
						</li>

						<li id="navTreeView">
							TreeView
							<ul>
								<li id="navTreeView-addContextMenu" data-contents="navTreeView-addContextMenu-contents">addContextMenu</li>
								<li id="navTreeView-findNodeByText" data-contents="navTreeView-findNodeByText-contents">findNodeByText</li>
								<li id="navTreeView-findNodeByValue" data-contents="navTreeView-findNodeByValue-contents">findNodeByValue</li>
								<li id="navTreeView-findNodeContainsValue" data-contents="navTreeView-findNodeContainsValue-contents">findNodeContainsValue</li>
								<li id="navTreeView-Node">
									Node Object
									<ul>
										<li id="navTreeView-Node-treeview" data-contents="navTreeView-Node-treeview-contents">treeview</li>
										<li id="navTreeView-Node-element" data-contents="navTreeView-Node-element-contents">element</li>
										<li id="navTreeView-Node-select" data-contents="navTreeView-Node-select-contents">select</li>
										<li id="navTreeView-Node-deselect" data-contents="navTreeView-Node-deselect-contents">deselect</li>
										<li id="navTreeView-Node-selected" data-contents="navTreeView-Node-selected-contents">selected</li>
										<li id="navTreeView-Node-highlight" data-contents="navTreeView-Node-highlight-contents">highlight</li>
										<li id="navTreeView-Node-unhighlight" data-contents="navTreeView-Node-unhighlight-contents">unhighlight</li>
										<li id="navTreeView-Node-expand" data-contents="navTreeView-Node-expand-contents">expand</li>
										<li id="navTreeView-Node-collapse" data-contents="navTreeView-Node-collapse-contents">collapse</li>
										<li id="navTreeView-Node-enable" data-contents="navTreeView-Node-enable-contents">enable</li>
										<li id="navTreeView-Node-disable" data-contents="navTreeView-Node-disable-contents">disable</li>
										<li id="navTreeView-Node-check" data-contents="navTreeView-Node-check-contents">check</li>
										<li id="navTreeView-Node-uncheck" data-contents="navTreeView-Node-uncheck-contents">uncheck</li>
										<li id="navTreeView-Node-text" data-contents="navTreeView-Node-text-contents">text</li>
										<li id="navTreeView-Node-value" data-contents="navTreeView-Node-value-contents">value</li>
										<li id="navTreeView-Node-setText" data-contents="navTreeView-Node-setText-contents">setText</li>
										<li id="navTreeView-Node-isVisible" data-contents="navTreeView-Node-isVisible-contents">isVisible</li>
										<li id="navTreeView-Node-parent" data-contents="navTreeView-Node-parent-contents">parent</li>
										<li id="navTreeView-Node-children" data-contents="navTreeView-Node-children-contents">children</li>
										<li id="navTreeView-Node-addNode" data-contents="navTreeView-Node-addNode-contents">addNode</li>
										<li id="navTreeView-Node-remove" data-contents="navTreeView-Node-remove-contents">remove</li>
									</ul>
								</li>
							</ul>
						</li>

					</ul>
                </div>



				<!--
				  -- CONTENTS
				  -->
                <div id="contentPane">
					<div id="coming-soon-contents" class="helpdoc-contents helpdoc-hidden">
						<h2>Coming Soon</h2>
					</div>
					
					
					
					<!-- BEGIN : div.navHome-gettingStarted-contents -->
					<div id="navHome-gettingStarted-contents" class="helpdoc-contents">
						<h2>Add the telerik.extensions.js File to your Project</h2>
						
						<h4>Razor View Engine</h4>
						<pre class="helpdoc-code">
@(
    Html.Telerik().ScriptRegistrar()
		.Scripts(scripts =>
			scripts.AddGroup("LayoutGroup", group =>
				group.Add("~/Scripts/telerik.extensions.js")
			)
		)
)</pre>
						<h4>ASPX View Engine</h4>
						<pre class="helpdoc-code">
<%
	Html.Telerik().ScriptRegistrar()
		.Scripts(scripts =>
			scripts.AddGroup("LayoutGroup", group =>
				group.Add("~/Scripts/telerik.extensions.js")
			)
		)
%></pre>
					</div>
					<!-- END : div.navHome-gettingStarted-contents -->



					<!-- BEGIN : div.navComboBox-dataBindAsTable -->
					<div id="navComboBox-dataBindAsTable-contents" class="helpdoc-contents helpdoc-hidden">
						<h2>dataBindAsTable</h2>
						
						<h4>Description</h4>
						<div class="helpdoc-section">
							Bind a list of json objects as a table in the dropdownlist items.
						</div>
						
						<h4>Version(s) Supported</h4>
						<div class="helpdoc-section">
							telerik.extensions.js 2012 Q1 (2012-May-01)
						</div>
						
						<h4>Razor View Engine</h4>
						<pre class="helpdoc-code">
@{
    Html.Telerik().ComboBox()
        .Name("combobox")
        .HtmlAttributes( new { style = "width:400px" })
        .ClientEvents(events => events.OnLoad("combobox_onLoad"))
        .Render();
}

&lt;script type="text/javascript">
	combobox_onLoad = function (e) {
		var rootUrl = '@Url.Content("~")';

		$.ajax({
			url: rootUrl + '/ComboBox/SelectProducts',
			contentType: 'application/json; charset=utf-8',
			type: 'GET',
			dataType: 'json',
		})
		.done(function(response) {
			var combobox = $('#combobox').data('tComboBox');

			combobox.dataBindAsTable({
				data: response.products,
				displayFields: [{
					fieldName: "Product",
					style: "font-weight:bold"
				}, {
					fieldName: "SubCategory",
					style: "color:Blue"
				}],
				selectedField: "Product",
				valueField: "Id",
				height: '500px'
			});
		});
	}
&lt;/script></pre>

					<h4>Controller</h4>
					<pre class="helpdoc-code">
using System.Web.Mvc;

namespace TelerikMvcClientApiRazor.Controllers
{
	public class ComboBoxController : BaseController
	{
		public ActionResult DataBindListItemsAsTable()
		{
			return View();
		}
		
		public ActionResult SelectProducts()
		{
			return Json(new { products = GetProducts() }, JsonRequestBehavior.AllowGet);
		}
		
		protected IList<Product> GetProducts()
		{
			IList<Product> products = new List<Product>();

			products.Add(new Product { Id = 1, Name = "ASP.NET AJAX", Category = "Developer Tools", SubCategory = "Web UI Controls & Components", Controls = 44 });
			products.Add(new Product { Id = 2, Name = "ASP.NET MVC", Category = "Developer Tools", SubCategory = "Web UI Controls & Components", Controls = 16 });
			products.Add(new Product { Id = 3, Name = "Silverlight", Category = "Developer Tools", SubCategory = "Web UI Controls & Components", Controls = 59 });
			products.Add(new Product { Id = 4, Name = "WPF", Category = "Developer Tools", SubCategory = "Desktop UI Controls & Components", Controls = 51 });
			products.Add(new Product { Id = 5, Name = "Windows Forms", Category = "Developer Tools", SubCategory = "Desktop UI Controls & Components", Controls = 27 });
			products.Add(new Product { Id = 6, Name = "Windows Phone", Category = "Developer Tools", SubCategory = "Mobile UI Controls & Components", Controls = 24 });
			products.Add(new Product { Id = 7, Name = "Telerik Reporting", Category = "Developer Tools", SubCategory = "Report Designer and Viewer", Controls = 8 });
			products.Add(new Product { Id = 8, Name = "OpenAccess ORM", Category = "Developer Tools", SubCategory = "Data Access", Controls = 8 });
			products.Add(new Product { Id = 9, Name = "Just Code", Category = "Developer Tools", SubCategory = "Productivity Tools", Controls = 12 });
			products.Add(new Product { Id = 10, Name = "Just Mock", Category = "Developer Tools", SubCategory = "Productivity Tools", Controls = 9 });
			products.Add(new Product { Id = 11, Name = "Just Trace", Category = "Developer Tools", SubCategory = "Productivity Tools", Controls = 10 });
			products.Add(new Product { Id = 12, Name = "Just Decompile", Category = "Developer Tools", SubCategory = "Productivity Tools", Controls = 6 });
			products.Add(new Product { Id = 13, Name = "TeamPulse", Category = "Agile Project Management", SubCategory = "", Controls = 9 });
			products.Add(new Product { Id = 14, Name = "Test Studio", Category = "Software Testing Tools", SubCategory = "", Controls = 5 });
			products.Add(new Product { Id = 15, Name = "Testing Framework", Category = "Software Testing Tools", SubCategory = "", Controls = 12 });
			products.Add(new Product { Id = 16, Name = "Sitefinity ASP.NET CMS", Category = "Web Content Management", SubCategory = "", Controls = 18 });
			products.Add(new Product { Id = 17, Name = "Add-ons Marketplace", Category = "Web Content Management", SubCategory = "", Controls = 18 });
			products.Add(new Product { Id = 18, Name = "SharePoint Acceleration Kit", Category = "SharePoint", SubCategory = "" });
			products.Add(new Product { Id = 19, Name = "Telerik Minifier", Category = "Free Tools", SubCategory = "" });
			products.Add(new Product { Id = 20, Name = "Code Converter", Category = "Free Tools", SubCategory = "" });
			products.Add(new Product { Id = 21, Name = "Razor Converter", Category = "Free Tools", SubCategory = "" });
			products.Add(new Product { Id = 22, Name = "Visual Style Builder", Category = "Free Tools", SubCategory = "" });
			products.Add(new Product { Id = 23, Name = "Template Builder", Category = "Free Tools", SubCategory = "" });
			products.Add(new Product { Id = 24, Name = "Kendo UI Widgets", Category = "Developer Tools", SubCategory = "Web UI Controls & Components", Controls = 16 });
			products.Add(new Product { Id = 25, Name = "Kendo UI Framework", Category = "Developer Tools", SubCategory = "Web UI Controls & Components", Controls = 6 });
			products.Add(new Product { Id = 26, Name = "Kendo UI DataViz", Category = "Developer Tools", SubCategory = "Web UI Controls & Components", Controls = 4 });
			products.Add(new Product { Id = 27, Name = "Kendo UI Mobile", Category = "Developer Tools", SubCategory = "Mobile UI Controls & Components", Controls = 8 });

			return products;
		}
	}
}
	</pre>
					</div>
					<!-- END : div.navComboBox-dataBindAsTable -->



					<!-- BEGIN : div.navComboBox-disableListItems -->
					<div id="navComboBox-disableListItems-contents" class="helpdoc-contents helpdoc-hidden">
						<h2>disableListItems</h2>
						
						<h4>Description</h4>
						<div class="helpdoc-section">
							Disable list items in the dropdown list.
						</div>
						
						<h4>Version(s) Supported</h4>
						<div class="helpdoc-section">
							telerik.extensions.js 2012 Q1 (2012-May-01)
						</div>
						
						<h4>Razor View Engine</h4>
						<pre class="helpdoc-code">
@{
    Html.Telerik().ComboBox()
        .Name("combobox")
        .HtmlAttributes(new { style = "width:300px" })
        .ClientEvents(events => events.OnLoad("combobox_onLoad"))
        .Render();
}
&lt;button style="margin-top:10px;" onclick="disableDropDownListItems();">Disable List Items&lt;/button>

&lt;script type="text/javascript">
	var categories = [
		{ Value: 1, Text: 'Developer Tools' },
		{ Value: 2, Text: 'Agile Project Management' },
		{ Value: 3, Text: 'Software Testing Tools' },
		{ Value: 4, Text: 'Software Testing Tools' },
		{ Value: 5, Text: 'Web Content Management' },
		{ Value: 6, Text: 'SharePoint' },
		{ Value: 7, Text: 'Free Tools' },
		{ Value: 8, Text: 'Unselectable' }
	];

	combobox_onLoad = function (e) {
		var combobox = $('#combobox').data('tComboBox');
		combobox.dataBind(categories);
	}

	disableDropDownListItems = function () {
		var combobox = $('#combobox').data('tComboBox');

		combobox.disableListItems([
			{ value: 6 }, // Disable the item with a value of 6.
			{ text: 'Unselectable'} // Disable the item with the text of 'Unselectable'.
		]);
	}
&lt;/script></pre>
					</div>
					<!-- END : div.navComboBox-disableListItems -->



					<!-- BEGIN : div.navComboBox-selectByText -->
					<div id="navComboBox-selectByText-contents" class="helpdoc-contents helpdoc-hidden">
						<h2>selectByText</h2>
						
						<h4>Description</h4>
						<div class="helpdoc-section">
							Select an item in the dropdown based on the text for an item.
						</div>
						
						<h4>Version(s) Supported</h4>
						<div class="helpdoc-section">
							telerik.extensions.js 2012 Q1 (2012-May-01)
						</div>
						
						<h4>Razor View Engine</h4>
						<pre class="helpdoc-code">
@{
	Html.Telerik().ComboBox()
		.Name("combobox")
		.HtmlAttributes(new { style = "width:300px" })
		.ClientEvents(events => events.OnLoad("combobox_onLoad"))
		.Render();
}
&lt;br />
&lt;br />
&lt;button style="margin-top:10px;" onclick="selectByText('Web Content Management');">Select Web Content Management (by Text)&lt;/button>

&lt;script type="text/javascript">
	var categories = [
		{ Value: 1, Text: 'Developer Tools' },
		{ Value: 2, Text: 'Agile Project Management' },
		{ Value: 3, Text: 'Software Testing Tools' },
		{ Value: 4, Text: 'Software Testing Tools' },
		{ Value: 5, Text: 'Web Content Management' },
		{ Value: 6, Text: 'SharePoint' },
		{ Value: 7, Text: 'Free Tools' },
		{ Value: 8, Text: 'Unselectable' }
	];

	combobox_onLoad = function (e) {
		var combobox = $('#combobox').data('tComboBox');
		combobox.dataBind(categories);
	}

	selectByText = function (text) {
		var combobox = $('#combobox').data('tComboBox');
		combobox.selectByText(text);
	}
&lt;/script></pre>
					</div>
					<!-- END : div.navComboBox-selectByText -->



					<!-- BEGIN : div.navComboBox-selectByValue -->
					<div id="navComboBox-selectByValue-contents" class="helpdoc-contents helpdoc-hidden">
						<h2>selectByValue</h2>
						
						<h4>Description</h4>
						<div class="helpdoc-section">
							Select an item in the dropdown based on the value for an item.
						</div>
						
						<h4>Version(s) Supported</h4>
						<div class="helpdoc-section">
							telerik.extensions.js 2012 Q1 (2012-May-01)
						</div>
						
						<h4>Razor View Engine</h4>
						<pre class="helpdoc-code">
@{
	Html.Telerik().ComboBox()
		.Name("combobox")
		.HtmlAttributes(new { style = "width:300px" })
		.ClientEvents(events => events.OnLoad("combobox_onLoad"))
		.Render();
}
&lt;br />
&lt;br />
&lt;button style="margin-top:10px;" onclick="selectByValue(7);">Select Item with Value 7 (by Value)&lt;/button>

&lt;script type="text/javascript">
	var categories = [
		{ Value: 1, Text: 'Developer Tools' },
		{ Value: 2, Text: 'Agile Project Management' },
		{ Value: 3, Text: 'Software Testing Tools' },
		{ Value: 4, Text: 'Software Testing Tools' },
		{ Value: 5, Text: 'Web Content Management' },
		{ Value: 6, Text: 'SharePoint' },
		{ Value: 7, Text: 'Free Tools' },
		{ Value: 8, Text: 'Unselectable' }
	];

	combobox_onLoad = function (e) {
		var combobox = $('#combobox').data('tComboBox');
		combobox.dataBind(categories);
	}

	selectByValue = function (value) {
		var combobox = $('#combobox').data('tComboBox');
		combobox.selectByValue(value);
	}
&lt;/script></pre>
					</div>
					<!-- END : div.navComboBox-selectByValue -->
					
					
					
					<!-- BEGIN : div.navDropDownList-dataBindAsTable -->
					<div id="navDropDownList-dataBindAsTable-contents" class="helpdoc-contents helpdoc-hidden">
						<h2>dataBindAsTable</h2>
						
						<h4>Description</h4>
						<div class="helpdoc-section">
							Bind a list of json objects as a table in the dropdownlist items.
						</div>
						
						<h4>Version(s) Supported</h4>
						<div class="helpdoc-section">
							telerik.extensions.js 2012 Q1 (2012-May-01)
						</div>
						
						<h4>Razor View Engine</h4>
						<pre class="helpdoc-code">
@{
    Html.Telerik().DropDownList()
        .Name("dropdownlist")
        .HtmlAttributes( new { style = "width:400px" })
        .ClientEvents(events => events.OnLoad("dropdownlist_onLoad"))
        .Render();
}

&lt;script type="text/javascript">
	dropdownlist_onLoad = function (e) {
		var rootUrl = '@Url.Content("~")';

		$.ajax({
			url: rootUrl + '/DropDownList/SelectProducts',
			contentType: 'application/json; charset=utf-8',
			type: 'GET',
			dataType: 'json',
		})
		.done(function(response) {
			var dropdownlist = $('#dropdownlist').data('tDropDownList');

			dropdownlist.dataBindAsTable({
				data: response.products,
				displayFields: [{
					fieldName: "Product",
					style: "font-weight:bold"
				}, {
					fieldName: "SubCategory",
					style: "color:Blue"
				}],
				selectedField: "Product",
				valueField: "Id",
				height: '500px'
			});
		});
	}
&lt;/script></pre>

					<h4>Controller</h4>
					<pre class="helpdoc-code">
using System.Web.Mvc;

namespace TelerikMvcClientApiRazor.Controllers
{
	public class DropDownListController : BaseController
	{
		public ActionResult DataBindListItemsAsTable()
		{
			return View();
		}
		
		public ActionResult SelectProducts()
		{
			return Json(new { products = GetProducts() }, JsonRequestBehavior.AllowGet);
		}
		
		protected IList<Product> GetProducts()
		{
			IList<Product> products = new List<Product>();

			products.Add(new Product { Id = 1, Name = "ASP.NET AJAX", Category = "Developer Tools", SubCategory = "Web UI Controls & Components", Controls = 44 });
			products.Add(new Product { Id = 2, Name = "ASP.NET MVC", Category = "Developer Tools", SubCategory = "Web UI Controls & Components", Controls = 16 });
			products.Add(new Product { Id = 3, Name = "Silverlight", Category = "Developer Tools", SubCategory = "Web UI Controls & Components", Controls = 59 });
			products.Add(new Product { Id = 4, Name = "WPF", Category = "Developer Tools", SubCategory = "Desktop UI Controls & Components", Controls = 51 });
			products.Add(new Product { Id = 5, Name = "Windows Forms", Category = "Developer Tools", SubCategory = "Desktop UI Controls & Components", Controls = 27 });
			products.Add(new Product { Id = 6, Name = "Windows Phone", Category = "Developer Tools", SubCategory = "Mobile UI Controls & Components", Controls = 24 });
			products.Add(new Product { Id = 7, Name = "Telerik Reporting", Category = "Developer Tools", SubCategory = "Report Designer and Viewer", Controls = 8 });
			products.Add(new Product { Id = 8, Name = "OpenAccess ORM", Category = "Developer Tools", SubCategory = "Data Access", Controls = 8 });
			products.Add(new Product { Id = 9, Name = "Just Code", Category = "Developer Tools", SubCategory = "Productivity Tools", Controls = 12 });
			products.Add(new Product { Id = 10, Name = "Just Mock", Category = "Developer Tools", SubCategory = "Productivity Tools", Controls = 9 });
			products.Add(new Product { Id = 11, Name = "Just Trace", Category = "Developer Tools", SubCategory = "Productivity Tools", Controls = 10 });
			products.Add(new Product { Id = 12, Name = "Just Decompile", Category = "Developer Tools", SubCategory = "Productivity Tools", Controls = 6 });
			products.Add(new Product { Id = 13, Name = "TeamPulse", Category = "Agile Project Management", SubCategory = "", Controls = 9 });
			products.Add(new Product { Id = 14, Name = "Test Studio", Category = "Software Testing Tools", SubCategory = "", Controls = 5 });
			products.Add(new Product { Id = 15, Name = "Testing Framework", Category = "Software Testing Tools", SubCategory = "", Controls = 12 });
			products.Add(new Product { Id = 16, Name = "Sitefinity ASP.NET CMS", Category = "Web Content Management", SubCategory = "", Controls = 18 });
			products.Add(new Product { Id = 17, Name = "Add-ons Marketplace", Category = "Web Content Management", SubCategory = "", Controls = 18 });
			products.Add(new Product { Id = 18, Name = "SharePoint Acceleration Kit", Category = "SharePoint", SubCategory = "" });
			products.Add(new Product { Id = 19, Name = "Telerik Minifier", Category = "Free Tools", SubCategory = "" });
			products.Add(new Product { Id = 20, Name = "Code Converter", Category = "Free Tools", SubCategory = "" });
			products.Add(new Product { Id = 21, Name = "Razor Converter", Category = "Free Tools", SubCategory = "" });
			products.Add(new Product { Id = 22, Name = "Visual Style Builder", Category = "Free Tools", SubCategory = "" });
			products.Add(new Product { Id = 23, Name = "Template Builder", Category = "Free Tools", SubCategory = "" });
			products.Add(new Product { Id = 24, Name = "Kendo UI Widgets", Category = "Developer Tools", SubCategory = "Web UI Controls & Components", Controls = 16 });
			products.Add(new Product { Id = 25, Name = "Kendo UI Framework", Category = "Developer Tools", SubCategory = "Web UI Controls & Components", Controls = 6 });
			products.Add(new Product { Id = 26, Name = "Kendo UI DataViz", Category = "Developer Tools", SubCategory = "Web UI Controls & Components", Controls = 4 });
			products.Add(new Product { Id = 27, Name = "Kendo UI Mobile", Category = "Developer Tools", SubCategory = "Mobile UI Controls & Components", Controls = 8 });

			return products;
		}
	}
}
	</pre>
					</div>
					<!-- END : div.navDropDownList-dataBindAsTable -->



					<!-- BEGIN : div.navDropDownList-disableListItems -->
					<div id="navDropDownList-disableListItems-contents" class="helpdoc-contents helpdoc-hidden">
						<h2>disableListItems</h2>
						
						<h4>Description</h4>
						<div class="helpdoc-section">
							Disable list items in the dropdown list.
						</div>
						
						<h4>Version(s) Supported</h4>
						<div class="helpdoc-section">
							telerik.extensions.js 2012 Q1 (2012-May-01)
						</div>
						
						<h4>Razor View Engine</h4>
						<pre class="helpdoc-code">
@{
    Html.Telerik().DropDownList()
        .Name("dropdownlist")
        .HtmlAttributes(new { style = "width:300px" })
        .ClientEvents(events => events.OnLoad("dropdownlist_onLoad"))
        .Render();
}
&lt;button style="margin-top:10px;" onclick="disableDropDownListItems();">Disable List Items&lt;/button>

&lt;script type="text/javascript">
	var categories = [
		{ Value: 1, Text: 'Developer Tools' },
		{ Value: 2, Text: 'Agile Project Management' },
		{ Value: 3, Text: 'Software Testing Tools' },
		{ Value: 4, Text: 'Software Testing Tools' },
		{ Value: 5, Text: 'Web Content Management' },
		{ Value: 6, Text: 'SharePoint' },
		{ Value: 7, Text: 'Free Tools' },
		{ Value: 8, Text: 'Unselectable' }
	];

	dropdownlist_onLoad = function (e) {
		var dropdownlist = $('#dropdownlist').data('tDropDownList');
		dropdownlist.dataBind(categories);
	}

	disableDropDownListItems = function () {
		var dropdownlist = $('#dropdownlist').data('tDropDownList');

		dropdownlist.disableListItems([
			{ value: 6 }, // Disable the item with a value of 6.
			{ text: 'Unselectable'} // Disable the item with the text of 'Unselectable'.
		]);
	}
&lt;/script></pre>
					</div>
					<!-- END : div.navDropDownList-disableListItems -->



					<!-- BEGIN : div.navDropDownList-selectByText -->
					<div id="navDropDownList-selectByText-contents" class="helpdoc-contents helpdoc-hidden">
						<h2>selectByText</h2>
						
						<h4>Description</h4>
						<div class="helpdoc-section">
							Select an item in the dropdown based on the text for an item.
						</div>
						
						<h4>Version(s) Supported</h4>
						<div class="helpdoc-section">
							telerik.extensions.js 2012 Q1 (2012-May-01)
						</div>
						
						<h4>Razor View Engine</h4>
						<pre class="helpdoc-code">
@{
	Html.Telerik().DropDownList()
		.Name("dropdownlist")
		.HtmlAttributes(new { style = "width:300px" })
		.ClientEvents(events => events.OnLoad("dropdownlist_onLoad"))
		.Render();
}
&lt;br />
&lt;br />
&lt;button style="margin-top:10px;" onclick="selectByText('Web Content Management');">Select Web Content Management (by Text)&lt;/button>

&lt;script type="text/javascript">
	var categories = [
		{ Value: 1, Text: 'Developer Tools' },
		{ Value: 2, Text: 'Agile Project Management' },
		{ Value: 3, Text: 'Software Testing Tools' },
		{ Value: 4, Text: 'Software Testing Tools' },
		{ Value: 5, Text: 'Web Content Management' },
		{ Value: 6, Text: 'SharePoint' },
		{ Value: 7, Text: 'Free Tools' },
		{ Value: 8, Text: 'Unselectable' }
	];

	dropdownlist_onLoad = function (e) {
		var dropdownlist = $('#dropdownlist').data('tDropDownList');
		dropdownlist.dataBind(categories);
	}

	selectByText = function (text) {
		var dropdownlist = $('#dropdownlist').data('tDropDownList');
		dropdownlist.selectByText(text);
	}
&lt;/script></pre>
					</div>
					<!-- END : div.navDropDownList-selectByText -->



					<!-- BEGIN : div.navDropDownList-selectByValue -->
					<div id="navDropDownList-selectByValue-contents" class="helpdoc-contents helpdoc-hidden">
						<h2>selectByValue</h2>
						
						<h4>Description</h4>
						<div class="helpdoc-section">
							Select an item in the dropdown based on the value for an item.
						</div>
						
						<h4>Version(s) Supported</h4>
						<div class="helpdoc-section">
							telerik.extensions.js 2012 Q1 (2012-May-01)
						</div>
						
						<h4>Razor View Engine</h4>
						<pre class="helpdoc-code">
@{
	Html.Telerik().DropDownList()
		.Name("dropdownlist")
		.HtmlAttributes(new { style = "width:300px" })
		.ClientEvents(events => events.OnLoad("dropdownlist_onLoad"))
		.Render();
}
&lt;br />
&lt;br />
&lt;button style="margin-top:10px;" onclick="selectByValue(7);">Select Item with Value 7 (by Value)&lt;/button>

&lt;script type="text/javascript">
	var categories = [
		{ Value: 1, Text: 'Developer Tools' },
		{ Value: 2, Text: 'Agile Project Management' },
		{ Value: 3, Text: 'Software Testing Tools' },
		{ Value: 4, Text: 'Software Testing Tools' },
		{ Value: 5, Text: 'Web Content Management' },
		{ Value: 6, Text: 'SharePoint' },
		{ Value: 7, Text: 'Free Tools' },
		{ Value: 8, Text: 'Unselectable' }
	];

	dropdownlist_onLoad = function (e) {
		var dropdownlist = $('#dropdownlist').data('tDropDownList');
		dropdownlist.dataBind(categories);
	}

	selectByValue = function (value) {
		var dropdownlist = $('#dropdownlist').data('tDropDownList');
		dropdownlist.selectByValue(value);
	}
&lt;/script></pre>
					</div>
					<!-- END : div.navDropDownList-selectByValue -->
					
					
					
					<!-- BEGIN : div.navGrid-hideColumn-contents -->
					<div id="navGrid-hideColumn-contents" class="helpdoc-contents helpdoc-hidden">
						<h2>hideColumn</h2>
						
						<h4>Description</h4>
						<div class="helpdoc-section">
							Hide a column in the grid.
						</div>
						
						<h4>Version(s) Supported</h4>
						<div class="helpdoc-section">
							telerik.extensions.js 2012 Q1 (2012-May-01)
						</div>
						
						<h4>Parameters</h4>
						<div class="helpdoc-section">
							<b>index</b>
							<ul>
								<li>datatype: int</li>
								<li>description: Zero based index for the column.</li>
							</ul>
						</div>
						
						<h4>JavaScript</h4>
						<pre class="helpdoc-code">
$('#MyGrid').data('tGrid').hideColumn(1);</pre>
					</div>
					<!-- END : div.navGrid-hideColumn-contents -->
					
					
					
					<!-- BEGIN : div.navGrid-showColumn-contents -->
					<div id="navGrid-showColumn-contents" class="helpdoc-contents helpdoc-hidden">
						<h2>showColumn</h2>
						
						<h4>Description</h4>
						<div class="helpdoc-section">
							Show a column in the grid.
						</div>
						
						<h4>Version(s) Supported</h4>
						<div class="helpdoc-section">
							telerik.extensions.js 2012 Q1 (2012-May-01)
						</div>
						
						<h4>Parameters</h4>
						<div class="helpdoc-section">
							<b>index</b>
							<ul>
								<li>datatype: int</li>
								<li>description: Zero based index for the column.</li>
							</ul>
						</div>
						
						<h4>JavaScript</h4>
						<pre class="helpdoc-code">
$('#MyGrid').data('tGrid').showColumn(1);</pre>
					</div>
					<!-- END : div.navGrid-showColumn-contents -->
					
					
					
					<!-- BEGIN : div.navGrid-toggleColumnVisibility-contents -->
					<div id="navGrid-toggleColumnVisibility-contents" class="helpdoc-contents helpdoc-hidden">
						<h2>toggleColumnVisibility</h2>
						
						<h4>Description</h4>
						<div class="helpdoc-section">
							Toggle the visibility of a column in the grid.
						</div>
						
						<h4>Version(s) Supported</h4>
						<div class="helpdoc-section">
							telerik.extensions.js 2012 Q1 (2012-May-01)
						</div>
						
						<h4>Parameters</h4>
						<div class="helpdoc-section">
							<b>e</b>
							<ul>
								<li>datatype: json object</li>
								<li>description: Json object with the following attributes:
									<ul>
										<li>index
											<ul>
												<li>datatype: int</li>
												<li>description: Zero based index for the column.</li>
											</ul>
										</li>
										<li>visible
											<ul>
												<li>datatype: bool</li>
												<li>description: true to show, false to hide.</li>
											</ul>
										</li>
									</ul>
								</li>
							</ul>
						</div>
						
						<h4>JavaScript</h4>
						<pre class="helpdoc-code">
$('#MyGrid').data('tGrid').toggleColumnVisibility({ index: 1, visible: true });</pre>
					</div>
					<!-- END : div.navGrid-toggleColumnVisibility-contents -->
					
					
					
					<!-- BEGIN : div.navGrid-enableClientSort-contents -->
					<div id="navGrid-enableClientSort-contents" class="helpdoc-contents helpdoc-hidden">
						<h2>enableClientSort</h2>
						
						<h4>Description</h4>
						<div class="helpdoc-section">
							Enable client side sorting in the grid.
						</div>
						
						<h4>Version(s) Supported</h4>
						<div class="helpdoc-section">
							telerik.extensions.js 2012 Q1 (2012-May-01)
						</div>
						
						<h4>Parameters</h4>
						<div class="helpdoc-section">
							<b>e</b>
							<ul>
								<li>datatype: json object</li>
								<li>description: Json object with the following attributes:
									<ul>
										<li>onlyColsDefinedInMarkup
											<ul>
												<li>datatype: bool</li>
												<li>description:<br/>
												true - sorting should only be enabled for columns that have Sortable set to true for columns defined in the HTML markup.<br/>
												false - sorting should be enabled for all columns regardless of what columns have Sortable set in the HTML markup.</li>
												<li>[optional] defaults to true</li>
											</ul>
										</li>
									</ul>
								</li>
							</ul>
						</div>
						
						<h4>JavaScript</h4>
						Enable client sort for all columns.
						<pre class="helpdoc-code">
$('#MyGrid').data('tGrid').enableClientSort();</pre>

						Enable client sort for columns that have Sortable set in the HTML markup.
						<pre class="helpdoc-code">
$('#MyGrid').data('tGrid').enableClientSort({ onlyColsDefinedInMarkup:false });</pre>
					</div>
					<!-- END : div.navGrid-enableClientSort-contents -->
					
					
					
					<!-- BEGIN : div.navGrid-hideGroupColumns-contents -->
					<div id="navGrid-hideGroupColumns-contents" class="helpdoc-contents helpdoc-hidden">
						<h2>hideGroupColumns</h2>
						
						<h4>Description</h4>
						<div class="helpdoc-section">
							Hide columns that are grouped.
						</div>
						
						<h4>Version(s) Supported</h4>
						<div class="helpdoc-section">
							telerik.extensions.js 2012 Q1 (2012-May-01)
						</div>
						
						<h4>JavaScript</h4>
						<pre class="helpdoc-code">
$('#MyGrid').data('tGrid').hideGroupColumns();</pre>
					</div>
					<!-- END : div.navGrid-hideGroupColumns-contents -->
					
					
					
					<!-- BEGIN : div.navGrid-enableRowDblClick-contents -->
					<div id="navGrid-enableRowDblClick-contents" class="helpdoc-contents helpdoc-hidden">
						<h2>enableRowDblClick</h2>
						
						<h4>Description</h4>
						<div class="helpdoc-section">
							Enable double-click on a row.
						</div>
						
						<h4>Version(s) Supported</h4>
						<div class="helpdoc-section">
							telerik.extensions.js 2012 Q1 (2012-May-01)
						</div>
						
						<h4>JavaScript</h4>
						<pre class="helpdoc-code">
$('#MyGrid').data('tGrid').enableRowDblClick();</pre>
					</div>
					<!-- END : div.navGrid-enableRowDblClick-contents -->
					
					
					
					<!-- BEGIN : div.navTabStrip-getTab-contents -->
					<div id="navTabStrip-getTab-contents" class="helpdoc-contents helpdoc-hidden">
						<h2>getTab</h2>
						
						<h4>Description</h4>
						<div class="helpdoc-section">
							Get a tab.
						</div>
						
						<h4>Version(s) Supported</h4>
						<div class="helpdoc-section">
							telerik.extensions.js 2012 Q1 (2012-May-01)
						</div>
						
						<h4>Parameters</h4>
						<div class="helpdoc-section">
							<b>e</b>
							<ul>
								<li>datatype: json object</li>
								<li>description: Json object with one of the following attributes:
									<ul>
										<li>text
											<ul>
												<li>datatype: string</li>
												<li>description: text displayed on the tab.</li>
											</ul>
										</li>
										<li>index
											<ul>
												<li>datatype: int</li>
												<li>description: zero based index of the tab.</li>
											</ul>
										</li>
									</ul>
								</li>
							</ul>
						</div>
						
						<h4>JavaScript</h4>
						Get tab by text.
						<pre class="helpdoc-code">
var tab = $('#MyTabStrip').data('tTabStrip').getTab({ text: 'Tab 2' });</pre>

						Get tab by index.
						<pre class="helpdoc-code">
var tab = $('#MyTabStrip').data('tTabStrip').getTab({ index: 1 });</pre>
					</div>
					<!-- END : div.navTabStrip-getTab-contents -->
				</div>
			</div>
		</div>
	</div>
	
	<script src="js/jquery.min.js"></script>
	<script src="js/kendo.web.min.js"></script>
	
	<script>
		var Layout = {}
		
		Layout.init = function() {
			// Initialize the main splitter.
			$("#mainSplitter").kendoSplitter({
				orientation: "vertical",
				panes: [
					{ size: "75px", resizable: false },
				]
			});
			// Initialize the content splitter.
			$("#contentSplitter").kendoSplitter({
				panes: [
					{ size: "200px", collapsible: true }
				]
			});
			// Hide th e scrollbar in the main splitter.
			$('#mainSplitter').children('div.k-pane').css('overflow-y', 'hidden');

			// Call the Layout.resize function every 100 miliseconds.
			setInterval("Layout.resize()", 100);
		}
		
		Layout.resize = function () {
			var height = $(window).height();

			// Has the window height changed?
			if (height != Layout._height) {
				Layout._height = height;

				// Resize the main splitter.
				var mainSplitter = $('#mainSplitter');
				mainSplitter.height(height - 25);
				mainSplitter.resize();

				// Resize the content splitter.
				var contentSplitter = $('#contentSplitter');
				contentSplitter.height(height - 77);
				contentSplitter.resize();
			}
		}
	</script>
	
    <script>
		var Navigation = {}
		
		Navigation.init = function() {
			var navPanelBar = $("#navPanelBar").kendoPanelBar({
				select: Navigation.navPanelBar_onSelect
			}).data("kendoPanelBar");
			navPanelBar.expand($("#navHome")).select($("#navHome-gettingStarted"));
		}
		
		Navigation.navPanelBar_onSelect = function(e) {
			console.log(e);
			
			var $item = $(e.item);
			var contents = $item.attr("data-contents");
			if (contents != undefined && contents.length > 0) {
				$("div.helpdoc-contents").addClass("helpdoc-hidden");
				
				if ($("#" + contents).length > 0) {
				$("#" + contents).removeClass("helpdoc-hidden");
				} else {
					$("#coming-soon-contents").removeClass("helpdoc-hidden");
				}
			}
		}
	</script>
	
	<script>
		$(document).ready(function() {
			Layout.init();
			Navigation.init();
		});
	</script>
</body>
</html>